import './VideoItem.scss'
import { CheckOutlined } from "@ant-design/icons";
import { useNavigate } from 'react-router-dom';
import { useDispatch,useSelector } from 'react-redux';
import { setUserStatus } from '@/store/modules/user';



function VideoItem({ videoItemInfo }) {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const {user_status} = useSelector(state => state.user);
    

    function intoVideo(){

        dispatch(setUserStatus({
            ...user_status,
            video_url:videoItemInfo.video_url,
            video_id:videoItemInfo.video_id
        }))

        navigate('/studentvideoplay');
    }
    // console.log(key);
    return (
        <div 
            className="VideoItem"
            onClick={intoVideo}
        >
            <img 
                alt="视频封面" 
                className="VideoCover" 
                src={'./static/images/videoCover.png'}
            ></img>
            <header>
                <h1>{videoItemInfo.video_name}</h1>
                <h2>{videoItemInfo.video_publish_date}</h2>
            </header>
            <div className={`finishStatus ${videoItemInfo.if_video_finish?'finished':'unfinished'}`}>
                <div><CheckOutlined /></div>
                <span className='text'>{videoItemInfo.if_video_finish?'已完成':'未完成'}</span>
            </div>
        </div>
    )
}

export default VideoItem;